<template>
	<view class="main">
		<u-popup :show="isShowToIn" mode="bottom" :overlay="true" :closeOnClickOverlay="false" @touchmove.stop.prevent="moveHandle">
			<view class="content">
				<view class="header">
					<view @click="hideShow">取消</view>
					<view class="confirm" @click="confirm">确定{{index}}个</view>
				</view>
				<view class="search-bar">
					<u-search placeholder="搜索场地" v-model="searchMerchantStoreName" :showAction="false"></u-search>
				</view>

				<view class="checkAll">
					<view>全选</view>
					<view>
						<checkbox-group @change="checkboxAllChange">
							<checkbox :value="true" :checked="checkedAll" color="#6072FF"/>
						</checkbox-group>
					</view>
				</view>
				<u-line></u-line>
				<scroll-view scroll-y="true" style="height: 600rpx;">
					<checkbox-group @change="checkboxChange">
						<view class="item" v-for="(item,index) in siteList" :key="index">
							<view>{{item.storeName}}</view>
							<view>
								<checkbox :value="item.id" :checked="item.check" color="#6072FF"/>
							</view>
						</view>
					</checkbox-group>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name:"site-select",
		props:{
			isShowToIn: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				index : 0,
				siteList: [],
				formerList: [],// 历史记录
				checked : false,
				formerChecked: false,// 历史全选
				value: '',
				searchMerchantStoreName: '',
				// 全选
				checkedAll: false,
			};
		},
		watch: {
			searchMerchantStoreName() {
				this.findData();
			},
      checkedAll(val, oldVal){
        // console.log("val", val)
        // console.log("oldVal", oldVal)
        // console.log("checkedAll", this.checkedAll)
      },
		},
		created() {
			this.findData();
		},
		methods:{
			// 父组件传入id集合，子组件默认选中既可
			initCheck(idList){
        // console.log("idList", idList)
        // console.log("this.siteList", this.siteList)
				this.formerList.length = 0;
				this.siteList.forEach(item => {
					item['check'] = false;
					idList.forEach(item1 => {
						if(item1 == item.id){
							item.check = true;
						}
					})
					this.formerList.push(JSON.parse(JSON.stringify(item)));
				})
				this.checkedAll = this.siteList.every(item => item.check);
				this.formerChecked = JSON.parse(JSON.stringify(this.checkedAll));
				this.countIndex();
			},
			// 选某个
			checkboxChange(e){
				let map = new Map();
				e.detail.value.forEach(item => {
					map.set(item, item)
				})
				for (let i = 0; i < this.siteList.length; ++i) {
					let item = map.get(this.siteList[i].id.toString());
					if(!this.$u.test.isEmpty(item)){
						this.siteList[i].check = true;
					}else{
						this.siteList[i].check = false;
					}
				}

				this.checkedAll = this.siteList.every(item => item.check);
				this.countIndex();
			},

			// 全选
			checkboxAllChange(e){
				this.checkedAll = !this.checkedAll;
				this.siteList.map(val => {val.check = this.checkedAll;})
				this.$forceUpdate()
				this.countIndex();
			},

			hideShow(){
				// 点击取消的时候把历史选择重新赋值
				this.siteList = []
				this.formerList.forEach(item => {
					this.siteList.push(JSON.parse(JSON.stringify(item)))
				})
				// 加载历史全选
				this.checkedAll = JSON.parse(JSON.stringify(this.formerChecked));
				this.countIndex();
				this.$emit('hideShow');
			},

      setSiteList(){
        let merchantStoreIdArray = [];
        this.siteList.forEach(item => {
          if (item.check){
            merchantStoreIdArray.push(item.id)
          }
        })
        // console.log("this.siteList", this.siteList)
        // console.log("merchantStoreIdArray", merchantStoreIdArray)
        const data = {
          isCheckAll: this.checkedAll,
          merchantStoreIdArray: merchantStoreIdArray
        }
        this.$emit("setSiteList", data);
      },

			confirm(){
				if(this.index <= 0){
					getApp().err("请选择至少一个场地");
					return;
				}

				// 点击确定时重新赋值历史记录
				this.formerList = [];
				this.siteList.forEach(item => {
					this.formerList.push(JSON.parse(JSON.stringify(item)))
				})
				// 保存一下历史全选
				this.formerChecked = JSON.parse(JSON.stringify(this.checkedAll));
        this.setSiteList();
				this.hideShow();
			},
			findData(){
				let param = {
					storeName: this.searchMerchantStoreName
				}
				this.$api('merchantStore.findAllMerchantStoreByUserId', param).then(res => {
					if (res.status == 0) {
						this.formerList.length = 0;
						this.siteList = res.data;
						this.siteList.forEach(item => {
							item['check'] = false;
							// 首次加载,保存历史记录
							this.formerList.push(JSON.parse(JSON.stringify(item)));
						})
						// 保存一下历史全选
						this.checkedAll = this.siteList.every(item => item.check);
						this.formerChecked = JSON.parse(JSON.stringify(this.checkedAll));
						this.countIndex();
						uni.hideLoading();
					} else {
						uni.hideLoading();
						this.$helpers.toast('请求数据失败:' + res.data.msg);
					}
				});
			},

			checkboxSubChange(item){
				item.check = !item.check;
				//集合中的这个属性全部都是true的时候，返回值就是true，否则一直false
				this.checkedAll = this.siteList.every(item1 => item1.check);
				this.countIndex();
			},
			// 计算选择多少个
			countIndex(){
				this.index = 0;
				this.siteList.forEach(res => {
					if (res.check) {
						this.index++;
					}
				})
			},

			moveHandle(){}
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		.content{
			padding: 30rpx;
			.header{
				display: flex;
				justify-content: space-between;


				.close{
					margin-right: 70rpx;
				}
				.title{
					font-size: 32rpx;
					margin: 0 auto;
				}
				.confirm{
					color: $u-primary;
				}
			}

			.search-bar{
				margin-top: $u-margin-large;
			}

			.checkAll{
				margin-top: $u-margin-large;
				margin-bottom: $u-margin-large;
				display: flex;
				justify-content: space-between;
			}

			.item{
				display: flex;
				justify-content: space-between;
				margin-top: $u-margin-large;
				margin-bottom: $u-margin-large;
			}
		}
	}

</style>
